<template>
    <div class="leave-adjustment-list">
        <el-button  style="display: flex;" type="primary" @click="$router.push('/main/renshi/renshizhidu/tiaoxiusq/tiaoxiusq')" icon="el-icon-back">返回</el-button>
            
        <div class="header">
            <!-- <router-link class="back-link" to="/main/renshi/renshizhidu/tiaoxiusq/tiaoxiusq">返回</router-link> -->
            <h2 class="page-title">调休申请单列表</h2>
        </div>
        <div class="filter-container">
            <el-form :inline="true" :model="queryParams" class="demo-form-inline">
                <el-form-item label="月份">
                    <el-date-picker v-model="queryParams.month" type="month" placeholder="选择月份" format="yyyy-MM"
                        value-format="yyyy-MM" @change="handleQuery"></el-date-picker>
                </el-form-item>
                <el-form-item label="员工姓名">
                    <el-input v-model="queryParams.employeeName" placeholder="请输入员工姓名" clearable
                        @keyup.enter.native="handleQuery"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleQuery">查询</el-button>
                    <el-button type="success" @click="handleAdd">新增</el-button>
                    <el-button type="danger" @click="handleBatchDelete"
                        :disabled="selectedIds.length === 0">批量删除</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-table v-loading="loading" :data="tableData" border style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column type="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="employeeId" label="工号" width="100"></el-table-column>
            <el-table-column prop="employeeName" label="姓名" width="100"></el-table-column>
            <el-table-column prop="groupName" label="组别" width="120"></el-table-column>
            <el-table-column prop="position" label="岗位" width="120"></el-table-column>
            <el-table-column label="上班日期" width="180">
                <template slot-scope="scope">
                    <span v-if="scope.row.workStartDate">
                        {{ formatDateTime(scope.row.workStartDate) }} 至 {{ formatDateTime(scope.row.workEndDate) }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="休息日期" width="180">
                <template slot-scope="scope">
                    <span v-if="scope.row.restStartDate">
                        {{ formatDateTime(scope.row.restStartDate) }} 至 {{ formatDateTime(scope.row.restEndDate) }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="applicant" label="申请人" width="120"></el-table-column>
            <el-table-column prop="status" label="状态" width="100">
                <template slot-scope="scope">
                    <el-tag :type="getStatusType(scope.row.status)">{{ getStatusText(scope.row.status) }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
            <el-table-column label="操作" width="250" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="handleView(scope.row)">查看</el-button>
                    <el-button size="mini" type="success" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination-container">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="queryParams.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="queryParams.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
        </div>
    </div>
</template>

<script>
import { getLeaveAdjustmentList, deleteLeaveAdjustment, batchDeleteLeaveAdjustment } from '@/api/leaveAdjustment'

export default {
    data() {
        return {
            loading: false,
            tableData: [],
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                month: '',
                employeeName: '',
            },
            selectedIds: []
        }
    },
    created() {
        this.getList()
    },
    methods: {
        async getList() {
            this.loading = true
            try {
                const response = await getLeaveAdjustmentList(this.queryParams)
                if (response.data && response.data.code === 200) {
                    this.tableData = response.data.data.records || []
                    this.total = response.data.data.total || 0
                } else {
                    this.$message.error(response.data.message || '获取列表失败')
                }
            } catch (error) {
                this.$message.error('获取列表失败：' + error.message)
            } finally {
                this.loading = false
            }
        },
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        handleSizeChange(val) {
            this.queryParams.pageSize = val
            this.getList()
        },
        handleCurrentChange(val) {
            this.queryParams.pageNum = val
            this.getList()
        },
        handleSelectionChange(selection) {
            this.selectedIds = selection.map(item => item.id)
        },
        handleAdd() {
            this.$router.push('/main/renshi/renshizhidu/tiaoxiusq/tiaoxiusq')
        },
        handleView(row) {
            this.$router.push(`/main/renshi/renshizhidu/tiaoxiusq/tiaoxiusq?id=${row.id}&type=view`)
        },
        handleEdit(row) {
            this.$router.push(`/main/renshi/renshizhidu/tiaoxiusq/tiaoxiusq?id=${row.id}&type=edit`)
        },
        async handleDelete(row) {
            try {
                await this.$confirm('确认删除该记录吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })

                const response = await deleteLeaveAdjustment(row.id)
                if (response.data && response.data.code === 200) {
                    this.$message.success('删除成功')
                    this.getList()
                } else {
                    this.$message.error(response.data.message || '删除失败')
                }
            } catch (error) {
                if (error !== 'cancel') {
                    this.$message.error('删除失败：' + error.message)
                }
            }
        },
        async handleBatchDelete() {
            if (this.selectedIds.length === 0) {
                this.$message.warning('请选择要删除的记录')
                return
            }

            try {
                await this.$confirm(`确认删除选中的 ${this.selectedIds.length} 条记录吗？`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })

                const response = await batchDeleteLeaveAdjustment(this.selectedIds)
                if (response.data && response.data.code === 200) {
                    this.$message.success('批量删除成功')
                    this.getList()
                } else {
                    this.$message.error(response.data.message || '批量删除失败')
                }
            } catch (error) {
                if (error !== 'cancel') {
                    this.$message.error('批量删除失败：' + error.message)
                }
            }
        },
        formatDateTime(dateObj) {
            if (!dateObj) return '';

            // 如果是字符串格式的日期时间，直接返回
            if (typeof dateObj === 'string') {
                return dateObj;
            }

            // 如果是对象格式的日期时间，需要组合
            if (typeof dateObj === 'object' && dateObj !== null) {
                const { year, month, day, hour, minute } = dateObj;
                if (year && month && day) {
                    return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')} ${hour || '00'}:${minute || '00'}`;
                }
            }

            return '';
        },
        getStatusType(status) {
            switch (status) {
                case 'approved':
                    return 'success';
                case 'rejected':
                    return 'danger';
                default:
                    return 'info';
            }
        },
        getStatusText(status) {
            switch (status) {
                case 'approved':
                    return '已批准';
                case 'rejected':
                    return '已拒绝';
                default:
                    return '待审批';
            }
        }
    }
}
</script>

<style scoped>
.leave-adjustment-list {
    font-family: '宋体', sans-serif;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    height: calc(100vh - 40px);
    width: 1200px;
    margin: 0 auto;
}

.header {
    position: relative;
    margin-bottom: 20px;
}

.back-link {
    color: #409EFF;
    position: absolute;
    top: 10px;
    left: 10px;
    text-decoration: none;
}

.page-title {
    font-size: 1em;
    color: #303133;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #EBEEF5;
    text-align: center;
}

.filter-container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.demo-form-inline {
    display: flex;
    align-items: center;
}

.el-form-item {
    margin-right: 20px;
}

.el-button {
    margin-right: 10px;
}

.el-table {
    margin-top: 20px;
    border-radius: 8px;
    overflow: hidden;
}

.el-table th {
    background-color: #f2f2f2;
}

.el-table td,
.el-table th {
    padding: 12px;
}

.pagination-container {
    margin-top: 20px;
    text-align: right;
}
</style>